权重

css 权重问题并不简单。

什么是 css 权重

css 权重决定了你 css 规则怎样被浏览器解析直到生效。css 权重关系到你的 css 规则是怎样显示的。

当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。

• 权重决定了哪一条规则会被浏览器应用在元素上
• 权重的不同，是你所期望的效果，没有通过 css 规则在元素上生效的主要原因
• 权重的级别划分时包含了所有的 css 选择器
• 如果两个选择器作用在同一元素上，则权重高者生效
• 如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的 css 规则权重要更大，会取代前面的 css 规则)
• 如果两个选择器权重值不同，则权重大的规则被计算到权重中
• 如果一条规则包含了更高权重的选择器，那么这个规则权重更高
• 最后定义的规则会覆盖所有跟前面冲突的规则

四大等级

行内样式 > id > class 类/伪类/属性 > 标签/元素/伪元素 > inherit 继承/* 通配符

• 行内样式：1000
• id：100
• class 类/伪类/属性：10
• 标签/元素/伪元素：1
• inherit 继承/* 通配符：0

!important

• !important 会修改当前对应元素的当前 css 属性和值的权重，对子元素权重没影响
• 有 !important 指定的权重值大于所有未用 !important 指定的规则
• 非到万不得已不要用 !important